<template>
	<div id="attendenceManage">
		<div class="breadcrumb">
			<img src="../../../../static/img/attendance_1.png" class="head_img">
			<span class="title">考勤记录</span>
		</div>
		<div class="search">

			<el-select v-model="semester" placeholder="全部学期" @change="getClasses">
				<el-option v-for="item in semesterLists" :label="item.name" :value="item.id" :key="item.id"></el-option>
			</el-select>

			<el-select v-model="unid" placeholder="全部校区">
				<el-option v-for="item in campusLists" :label="item.name" :value="item.id" :key="item.id"></el-option>
			</el-select>

			<el-select v-model="teacher" placeholder="全部老师" @change="getClasses">
				<el-option v-for="item in teacherLists" :label="item.name" :value="item.id" :key="item.id"></el-option>
			</el-select>

			<el-select v-model="classes" placeholder="全部课程">
				<el-option v-for="item in classesLists" :label="item.name" :value="item.id" :key="item.id"></el-option>
			</el-select>

			<el-button class="sel_btn" type="primary" @click="search">筛选</el-button>
		</div>
		<div class="list">
			<div class="list_head">
				<span class="head_name">
					<el-input class="keyword" type='text' placeholder="请输入学生姓名或者学号" icon="search" @keyup.enter.native="search" :on-icon-click="search"
					 v-model="keywords"></el-input>
				</span>
				<el-button class="complete" type="primary" @click="completionRate()">课程完成率</el-button>
				<el-button class="add" type="primary" @click="importData()">导出数据</el-button>
			</div>
			<el-table :data="list" @row-click="selectDetail">
				<el-table-column prop="name" label="姓名">
				</el-table-column>
				<el-table-column prop="stuNo" label="学号">
				</el-table-column>
				<el-table-column prop="zoneName" label="校区" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="gradeName" label="年级">
				</el-table-column>
				<el-table-column prop="department" label="院系" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="teacherName" label="老师">
				</el-table-column>
				<el-table-column prop="className" label="课程">
				</el-table-column>
				<el-table-column label="完成/出勤次数">
					<template scope="scope">
						<span v-if="scope.row.targetTimes">{{scope.row.finishedTimes}}/{{scope.row.targetTimes}}</span>
					</template>
				</el-table-column>
				<el-table-column label="完成进度">
					<template scope="scope">
						<span v-if="scope.row.targetTimes">
							<span v-if="scope.row.finishedTimes >= scope.row.targetTimes">已完成</span>
							<span v-else>{{parseInt(scope.row.finishedTimes*100/Number(scope.row.targetTimes))}}%</span>
						</span>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination v-show="this.totalCount > 0" layout="prev, pager, next, jumper" :page-size="10" :current-page="currentPage"
				 :total="totalCount" @current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</div>

	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			return {
				list: [],
				campusLists: [],
				semesterLists: [],
				totalCount: 0,
				hasSemester: true,
				teacherLists: [{ id: 0, name: "全部老师" }],
				classesLists: [{ id: 0, name: "全部课程" }],
				keywords: this.$util.getUrlParam("keywords") || "",
				unid: parseInt(this.$util.getUrlParam("unid")) || 0,
				teacher: parseInt(this.$util.getUrlParam("teacher")) || 0,
				classes: parseInt(this.$util.getUrlParam("classes")) || 0,
				semester: parseInt(this.$util.getUrlParam("semester")) || 0,
				currentPage: parseInt(this.$util.getUrlParam("pageNum")) || 1
			};
		},
		mounted() {
			this.getSemesterDetail();
			this.getCampus();
			this.getTeacher();
			if (this.$util.getUrlParam("teacher")) {
				this.getClasses();
			}
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			//考勤记录列表
			getAttendanceRecord() {
				this.list = [];
				let url = this.$util.domain + "/campusadminapi/v2/attendance/record/list";

				if (!this.hasSemester) {
					return;
				}
				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						pageSize: 10,
						sid: this.semester,
						mid: this.teacher,
						cid: this.classes,
						unid: Number(this.unid),
						pageNum: parseInt(this.currentPage),
						keywords: String(this.keywords).trimLeft()
					})
				}).then(response => {
					if (response.data.error == 10000) {
						let configList = response.data.data;
						if (configList && configList.length > 0) {
							for (let i = 0; i < configList.length; i++) {
								let $index = i + 1,
									$name = configList[i].name,
									$stuNo = configList[i].stuNo,
									$uid = configList[i].uid,
									$zoneName = configList[i].zoneName,
									$department = configList[i].department,
									$signCount = configList[i].signCount,
									$finishedTimes = configList[i].finishedTimes,
									$targetTimes = configList[i].targetTimes,
									$teacherName = configList[i].teacherName,
									$className = configList[i].className,
									$gradeName = configList[i].gradeName;

								this.list.push({
									uid: $uid,
									name: $name,
									stuNo: $stuNo,
									index: $index,
									zoneName: $zoneName,
									gradeName: $gradeName,
									className: $className,
									signCount: $signCount,
									department: $department,
									targetTimes: $targetTimes,
									teacherName: $teacherName,
									finishedTimes: $finishedTimes
								});
							}
						}
					}
				});
			},
			// 获取记录总页数
			getTotalCount() {
				let url = this.$util.domain + "/campusadminapi/v2/attendance/record/list/total";

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						unid: this.unid,
						cid: this.classes,
						mid: this.teacher,
						sid: this.semester,
						keywords: String(this.keywords).trimLeft()
					})
				}).then(response => {
					if (response.data.error == 10000) {
						// 记录总页数
						this.totalCount = response.data.data.totalNum;
					}
				});
			},
			// 导出数据
			importData() {
				let url = this.$util.domain + "/campusadminapi/v2/attendance/record/export";
				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						mid: this.teacher,
						cid: this.classes,
						unid: Number(this.unid),
						sid: Number(this.semester)
					})
				}).then(response => {
					if (response.data.error == 10000) {
						if (response.data.data.downloadURL) {
							window.location.href = response.data.data.downloadURL;
						}
					} else {
						this.$util.errorMsg(response.data.message);
					}
				});
			},

			//获取学期列表
			getSemesterDetail() {
				let url = this.$util.domain + "/campusadminapi/v1/tools/semesters";
				this.semesterLists = [{ id: 0, name: "全部学期" }];
				this.$http({
					url,
					method: "GET"
				}).then(response => {
					if (response.data.error == 10000) {
						// 学期列表
						let semesterList = response.data.data;
						if (semesterList && semesterList.length > 0) {
							this.semester = Number(this.$util.getUrlParam("semester")) || semesterList[0].sid;
							this.semesterLists = [];
							for (let i = 0; i < semesterList.length; i++) {
								this.semesterLists.push({
									id: semesterList[i].sid,
									name: semesterList[i].semesterName
								});
							}
						}
					}
				});
			},
			//获取所有校区
			getCampus() {
				let url = this.$util.domain + "/campusadminapi/v1/tools/campuszones";
				this.campusLists = [{ id: 0, name: "全部校区" }];
				this.$http({
					url,
					method: "GET"
				}).then(response => {
					if (response.data.error == 10000) {
						let dataList = response.data.data;
						if (dataList && dataList.length > 0) {
							for (let i = 0; i < dataList.length; i++) {
								this.campusLists.push({
									id: dataList[i].unid,
									name: dataList[i].zoneName
								});
							}
						}
					}
				});
			},
			// 获取老师列表
			getTeacher() {
				this.teacherLists = [{ id: 0, name: "全部老师" }];
				let url = this.$util.domain + "/campusadminapi/v1/tools/teachers";
				
				this.$http({
					url,
					method: "GET"
				}).then(response => {
					if (response.data.error == 10000) {
						// 老师列表
						let teacherList = response.data.data;
						if (teacherList && teacherList.length > 0) {
							if (this.$util.getUrlParam("teacher")) {
								this.teacher = Number(this.$util.getUrlParam("teacher"));
							} else {
								this.teacher = teacherList[0].mid;
							}
							this.teacherLists = [{ id: 0, name: "全部老师" }];
							for (let i = 0; i < teacherList.length; i++) {
								this.teacherLists.push({
									id: teacherList[i].mid,
									name: teacherList[i].teacherName
								});
							}
						} else {
							this.teacherLists = [{ id: 0, name: "全部老师" }];
						}

						this.getAttendanceRecord();
						this.getTotalCount();
					}
				});
			},
			// 获取课程列表
			getClasses() {
				this.classesLists = [{ id: 0, name: "全部课程" }];
				let url = this.$util.domain + "/campusadminapi/v1/tools/classes";
				
				if (!this.teacher || this.teacher == 0) {
					return;
				}
				this.$http({
					url,
					method: "GET",
					params: {
						sid: this.semester,
						mid: this.teacher
					}
				}).then(response => {
					if (response.data.error == 10000) {
						let dataList = response.data.data;
						if (dataList && dataList.length > 0) {
							for (let i = 0; i < dataList.length; i++) {
								this.classesLists.push({
									id: dataList[i].id,
									name: dataList[i].name
								});
							}
						}
					}
				});
			},
			// 搜索
			search() {
				this.getAttendanceRecord();
				this.getTotalCount();
			},
			selectDetail(row) {
				let semesterName = null;
				this.semesterLists.forEach(item => {
					if (item.id == this.semester) {
						semesterName = item.name;
					}
				});
				let obj = {
					uid: row.uid,
					semesterName,
					unid: this.unid,
					teacher: this.teacher,
					classes: this.classes,
					semester: this.semester,
					pageNum: this.currentPage,
					targetTimes: row.targetTimes,
					keywords: String(this.keywords).trimLeft()
				}
				this.$util.refreshTo("/#/attendanceDetail", obj);
			},
			// 课程完成率
			completionRate() {
				location.href = "/#/classComplete";
			},
			//请求分页数据分页
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getAttendanceRecord();
			}
		}
	};
</script>

<style>
	#attendenceManage {
		padding-top: 60px;
		height: calc(100% - 100px);
	}

	#attendenceManage .el-table--enable-row-hover .el-table__body tr:hover>td {
		background-color: #f7fcff;
		cursor: pointer;
	}

	#attendenceManage .add {
		position: absolute;
		right: 0px;
	}

	#attendenceManage .complete {
		position: absolute;
		right: 100px;
	}

	#attendenceManage .sel_btn {
		position: absolute;
		right: 55px;
		margin-top: 12px;
	}

	#attendenceManage .search {
		margin: 20px 30px;
		background: #ffffff;
		border-radius: 2px;
		height: 60px;
		line-height: 60px;
		padding: 0 25px;
	}

	#attendenceManage .el-select {
		display: inline-block;
		width: 20%;
	}

	#attendenceManage .keyword {
		width: 350px;
	}

	#attendenceManage .smallIn {
		width: 150px;
	}
</style>